<template>
   <div id='score-chart' class='score-chart'></div>
</template>
<script>
export default {
  props: ['pointData'],
  data () {
    return {
      myChart: {},
      data:[],
      dataCategory:[],
      st: null,
    }
  },
  mounted () {
    window.addEventListener('resize', function () {
      this.myChart.resize()
    }.bind(this))
    console.log(this.pointData)
    this._initChart()
  },
  destroyed() {
    clearTimeout(this.st)
  },
  methods: {
    _initChart () {
      this.data = [this.pointData.havingExamStuNum, this.pointData.missedStuNum]
      this.dataCategory = ['考试人数（人）', '缺考人数（人）']
      this.myChart = this.$echarts.init(document.getElementById('score-chart'))
      
      this.st = setTimeout(this._initChart,1000)
      this.myChart.setOption({
        tooltip : {
          trigger: 'item',
          formatter: "{b} <br/>{c} ({d}%)"
        },
        calculable : true,
        color: ['#ffa500', '#5a7cfb'],
        series : [
          {
            name: '考生比例',
            type: 'pie',
            radius: ['40%', '70%'],
            startAngle: 90,
            label: {
              show:false
            },
            data:(() => {
              let bData = []
              for(let i in this.dataCategory){
                bData.push({value:this.data[i],name:this.dataCategory[i]})
              }
              return bData
            })()
          }
        ]
      })
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
.score-chart {
  width: 100%;
  height: 100%;
}
</style>
